<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="60%"
    @close="btnCancel"
  >
    <el-row>
      <el-col :span="6" style="margin: 10px 0px"
        >【题型】：{{ qustionType(previewData.questionType) }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【编号】：{{ previewData.id }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【难度】：{{ qustionDifficulty(previewData.difficulty) }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【标签】：{{ previewData.tags }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【学科】：{{ previewData.subjectName }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【目录】：{{ previewData.directoryName }}</el-col
      >
      <el-col :span="6" style="margin: 10px 0px"
        >【方向】：{{ previewData.direction }}</el-col
      >
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">【题干】：</el-col>
    </el-row>
    <el-row>
      <div style="color: rgb(0, 153, 255)" v-html="previewData.question"></div>
    </el-row>
    <el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="$emit('update:showDialog', false)"
          style="margin-left: 810px"
          >关 闭</el-button
        >
      </div></el-row
    >
    <el-row>
      {{ qustionType(previewData.questionType) }}题
      <span v-if="previewData.questionType != 3">
        选项：（以下选中的选项为正确答案）</span
      ></el-row
    >
    <el-row v-if="previewData.questionType == 1">
      <el-radio
        :value="index"
        v-for="item in previewData.options"
        :key="item.id"
        :label="item.title"
        :checked="item.isRight == 1"
        style="display: block  margin-top: 15px"
      ></el-radio>
    </el-row>

    <el-row v-if="previewData.questionType == 2">
      <el-checkbox-group :value="list">
        <el-checkbox
          v-for="item in previewData.options"
          :key="item.id"
          :label="item.title"
          :checked="item.isRight == 1"
          style="display: block  margin-top: 15px"
        ></el-checkbox>
      </el-checkbox-group>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      【参考答案】：<el-button
        type="danger"
        size="small"
        @click="showVideo = true"
        >视频答案预览</el-button
      >
    </el-row>
    <video width="320" height="240" controls v-if="showVideo">
      <source src="https://v-cdn.zjol.com.cn/277004.mp4" type="video/mp4" />
    </video>
    <el-divider></el-divider>
    <el-row>
      <span>【答案解析】：</span><span v-html="previewData.answer"></span>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <span> 【题目备注】：</span><span v-html="previewData.remarks"></span>
    </el-row>
    <template v-slot:footer>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="btnCancel" type="primary"
          >关闭</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    previewData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      showVideo: false,
    }
  },
  computed: {
    number() {
      return 2
    },
    index() {
      return this.previewData.options.find((item) => item.isRight == 1).title
    },
    list() {
      return this.previewData.options.filter((item) => item.isRight == 1)
    },
  },
  methods: {
    qustionType(type) {
      if (type == 1) {
        return "单选"
      } else if (type == 2) {
        return "多选"
      } else {
        return "简答"
      }
    },
    qustionDifficulty(difficulty) {
      if (difficulty == 1) {
        return "简单"
      } else if (difficulty == 2) {
        return "一般"
      } else {
        return "困难"
      }
    },
    btnCancel() {
      this.$emit("update:showDialog", false)
      this.showVideo = false
    },
  },
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  flex-direction: end;
}
</style>

